<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info-card">
			<view class="user-header">
				<image class="avatar" src="/static/avatar/1.jpg"
					mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">神秘同学58982937</text>
					<text class="school">皖西学院</text>
				</view>
			</view>

			<!-- 数据统计 -->
			<view class="stats-container">
				<view class="stat-item">
					<text class="stat-number">0</text>
					<text class="stat-label">已发帖</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">0</text>
					<text class="stat-label">被点赞</text>
				</view>
			</view>
		</view>

		<!-- 学校相关操作 -->
		<view class="school-actions">
			<view class="action-card" @click="navigateTo('circleRules')">
				<uni-icons type="info" size="20" color="#1989fa"></uni-icons>
				<text>圈子规范</text>
			</view>
			<view class="action-card" @click="navigateTo('switchSchool')">
				<uni-icons type="redo" size="20" color="#1989fa"></uni-icons>
				<text>切换学校</text>
			</view>
		</view>

		<!-- 添加互助墙提示 -->
		<view class="add-wall-card">
			<text class="add-wall-text">点我添加学校万人互助墙</text>
			<button class="add-wall-btn" type="default" size="mini">添加城墙</button>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-container">
			<view v-for="(item, index) in menuItems" :key="index" class="menu-card" :style="{
          transform: `rotateY(${index % 2 === 0 ? '5deg' : '-5deg'})`,
          zIndex: menuItems.length - index
        }" @click="navigateTo(item.path)">
				<uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
				<text class="menu-text">{{ item.text }}</text>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<TabBar />

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 模拟数据
	const menuItems = ref([{
			icon: 'person',
			text: '个人资料',
			path: 'profile',
			color: '#1989fa'
		},
		{
			icon: 'chat',
			text: '历史评论',
			path: 'comments',
			color: '#1989fa'
		},
		{
			icon: 'headphones',
			text: '本校客服',
			path: 'schoolService',
			color: '#1989fa'
		},
		{
			icon: 'flag',
			text: '封禁申诉',
			path: 'appeal',
			color: '#ff4d4f'
		},
		{
			icon: 'hand-up',
			text: '商务合作',
			path: 'cooperation',
			color: '#1989fa'
		},
		{
			icon: 'paperclip',
			text: '用户协议',
			path: 'agreement',
			color: '#1989fa'
		},
		{
			icon: 'list',
			text: '我的帖子',
			path: 'myPosts',
			color: '#1989fa'
		},
		{
			icon: 'wallet',
			text: '跑腿收益',
			path: 'earnings',
			color: '#52c41a'
		},
		{
			icon: 'help',
			text: '官方客服',
			path: 'officialService',
			color: '#1989fa'
		},
		{
			icon: 'compose',
			text: '建议反馈',
			path: 'feedback',
			color: '#1989fa'
		},
		{
			icon: 'plus',
			text: '开通圈子',
			path: 'createCircle',
			color: '#1989fa'
		},
		{
			icon: 'locked',
			text: '隐私政策',
			path: 'privacy',
			color: '#1989fa'
		}
	])

	const tabBar = ref([{
			icon: 'home',
			text: '首页'
		},
		{
			icon: 'help',
			text: '互助'
		},
		{
			icon: 'compose',
			text: '发帖'
		},
		{
			icon: 'chat',
			text: '消息'
		},
		{
			icon: 'person',
			text: '我的'
		}
	])

	const currentTab = ref(4) // 默认选中"我的"tab

	// 方法
	const navigateTo = (path) => {
		// uni.showToast({
		// 	title: `/pages_my/changeSchool/changeSchool`,
		// 	icon: 'none'
		// })
		uni.navigateTo({url: '/pages_my/changeSchool/changeSchool'})
	}

	const switchTabBar = (index) => {
		currentTab.value = index
		if (index !== 4) {
			uni.switchTab({
				url: `/pages/${tabBar.value[index].text}/index`
			})
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;

		.user-info-card {
			background-color: #fff;
			padding: 40rpx 24rpx;
			margin-bottom: 20rpx;

			.user-header {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 24rpx;
					border: 2rpx solid #f0f0f0;
				}

				.user-details {
					display: flex;
					flex-direction: column;

					.username {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}

					.school {
						font-size: 26rpx;
						color: #666;
					}
				}
			}

			.stats-container {
				display: flex;
				justify-content: space-around;
				padding-top: 20rpx;
				border-top: 1rpx solid #f0f0f0;

				.stat-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.stat-number {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}

					.stat-label {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.school-actions {
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;
			margin-bottom: 20rpx;

			.action-card {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				padding: 20rpx 0;
				background-color: #fff;
				border-radius: 12rpx;

				uni-icons {
					margin-right: 12rpx;
				}

				text {
					font-size: 26rpx;
				}
			}
		}

		.add-wall-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			margin: 0 24rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.add-wall-text {
				font-size: 26rpx;
				color: #333;
			}

			.add-wall-btn {
				margin: 0;
				font-size: 24rpx;
			}
		}

		.menu-container {
			display: flex;
			flex-direction: column;
			padding: 0 24rpx;

			.menu-card {
				display: flex;
				align-items: center;
				padding: 28rpx 24rpx;
				margin-bottom: 16rpx;
				background-color: #fff;
				border-radius: 12rpx;
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				uni-icons:first-child {
					margin-right: 20rpx;
				}

				.menu-text {
					flex: 1;
					font-size: 28rpx;
					color: #333;
				}

				uni-icons:last-child {
					margin-left: auto;
				}
			}
		}
	}
</style>